<template>
  <div class="example">
    <video
      id="my-player"
      class="video-js"
      controls
    >
      <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"/>
    </video>
  </div>
</template>
<script>

// 引入video.js相关的js和css
import videojs from 'video.js'
import "video.js/dist/video-js.min.css"
export default {
  name: 'App',
  mounted(){
    let options = {
      width:960,
      height:400,
      userActions:{
        click:false
      }
    }

    let player = videojs('my-player',options,function(){
      
    })
    window.player = player
    // player.on('beforepluginsetup',function(name){
    //   console.log('beforepluginsetup name:',name)
    // })

    // player.on('canplay',function(){
    //   console.log('canplay')
    // })

    // player.on('controlsdisabled',function(){
    //   console.log('controlsdisabled')
    // })

    // player.on('loadeddata',function(){
    //   console.log('loadeddata')
    // })

    // player.on('loadstart',function(){
    //   console.log('loadstart')
    // })

    // player.on('progress',function(){
    //   console.log('progress')
    // })

    // player.on('playbackrateschange',function(){
    //   console.log('playbackrateschange')
    // })

    // player.on('ratechange',function(){
    //   console.log('ratechange')
    // })

    // player.on('seeking',function(){
    //   console.log('seeking')
    // })
    
    player.on('useractive',function(){
      console.log('useractive')
    })

    player.on('userinactive',function(){
      console.log('userinactive')
    })
    
    
    
  }
}
</script>
<style>
.example{
  width: 1000px;
  margin: auto;
  padding: 20px;
  
}
.btn-wrap{
  width: 100%;
  margin-top:20px;     
}
.btn{
  text-align: center;
  background: #409eff;
  padding:8px 15px;
  margin: 10px;
  border:none;
  outline: none;
  cursor: pointer;

}
</style>

